<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Mall - 商品详情</title>
    <link rel="stylesheet" href="../assets/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../assets/css/fontawesome-all.min.css"/>
    <link rel="stylesheet" href="../assets/css/animate.min.css"/>
    <link rel="stylesheet" href="../assets/css/magnific-popup.css"/>
    <link rel="stylesheet" href="../assets/css/nice-select.css"/>
    <link rel="stylesheet" href="../assets/css/pe-icon-7-stroke.css"/>
    <link rel="stylesheet" href="../assets/css/slick.css"/>
    <link rel="stylesheet" href="../assets/css/ui-range-slider.css"/>
    <link rel="stylesheet" href="../assets/css/meanmenu.css"/>
    <link rel="stylesheet" href="../assets/css/swipper.css"/>
    <link rel="stylesheet" href="../assets/css/main.css"/>
    <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script>
        $(function () {
            $(".cart-plus-minus .plus").click(function () {
                $("#count").val(String(parseInt($("#count").val()) + 1));
            });
            $(".cart-plus-minus .minus").click(function () {
                if ($("#count").val() >= 2) {
                    $("#count").val(parseInt($("#count").val()) - 1);
                }
            });
        });

        function to_cart() {
            $.get("/api/append-to-cart",
                {
                    "username": "${sessionScope.username}",
                    "goods-id": "${pageContext.request.getParameter('goods-id')}",
                    "add-count": $("#count").val()
                }, function (data) {
                    if (data.isSuccess) {
                        alert("加入购物车成功！");
                    } else {
                        alert("加入购物车失败！");
                    }
                }, "json");
        }

        function buy_now() {
            const data = "[{\"gid\":\"" + ${pageContext.request.getParameter('goods-id')} +"\",\"count\":\"" + $("#count").val() + "\"}]";
            $(location).attr("href", "/checkout?data=" + encodeURI(data));
        }
    </script>
</head>
<body>
<div class="header-area bg-black-2 d-none d-lg-block">
    <div class="header-top-2">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-xxl-3 col-lg-3">
                    <div class="header-left-2">
                        <div class="logo-2">
                            <a href="${pageContext.request.contextPath}/">
                                <img src="../assets/img/logo/logo-white.png" alt=""></a>
                        </div>
                    </div>
                </div>
                <div class="col-xxl-9 col-lg-9">
                    <div class="header-right-2 text-end">
                        <div class="epix-header-list-2 d-inline-block">
                            <ul>
                                <li>
                                    <c:choose>
                                        <c:when test="${sessionScope.username!=null}">
                                            <a style="color: white">欢迎您：${sessionScope.username}</a>
                                            <span style="color: white">/</span>
                                            <a href="${pageContext.request.contextPath}/logout" id="logout"> 注销</a>
                                        </c:when>
                                        <c:when test="${sessionScope.username==null}">
                                            <a href="${pageContext.request.contextPath}/login">登录</a>
                                            <span style="color: white">/</span>
                                            <a href="${pageContext.request.contextPath}/register"> 注册</a>
                                        </c:when>
                                    </c:choose>
                                </li>
                                <li><a href="${pageContext.request.contextPath}/cart">购物车</a></li>
                                <li><a href="${pageContext.request.contextPath}/order-list">历史订单</a></li>
                                <c:if test="${sessionScope.isAdmin==true}">
                                    <li><a href="${pageContext.request.contextPath}/goodsAll.jsp">后台</a></li>
                                </c:if>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="mobile-header d-lg-none">
    <div class="container">
        <div class="row">
            <div class="col-6">
                <div class="logo">
                    <a href="${pageContext.request.contextPath}/index"><img src="../assets/img/logo/logo.png"></a>
                </div>
            </div>
            <div class="col-6">
                <div class="bar-icon text-end">
                    <button class="toggle-nav-menu sidebar-menu-toggle">
                        <i class="fal fa-bars"></i>
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>
<main>
    <div id="loading">
        <div id="loading-center">
            <div id="loading-center-absolute">
                <div class="object" id="first_object"></div>
                <div class="object" id="second_object"></div>
                <div class="object" id="third_object"></div>
            </div>
        </div>
    </div>
    <div class="single-product-area mb-100" style="margin-top: 2%;margin-bottom: 230px;">
        <div class="container">
            <div class="row mb-40">
                <div class="col-xxl-6 col-lg-6">
                    <img src="${requestScope.aGoods.picture}" style="height: 100%"/>
                </div>
                <div class="col-xxl-6 col-lg-6">
                    <div class="epix-single-product-right">
                        <h4 class="epix-single-product-title">${requestScope.aGoods.goods_name}</h4>
                        <p class="epix-product-details-short-description">
                            ${requestScope.aGoods.detail}
                        </p>
                        <p class="price">
                                <span class="epix-price-amount">
                                    <bdi>
                                        <span class="epix-price-currency-symbol">￥</span>
                                      ${requestScope.aGoods.price}
                                    </bdi>
                                </span>
                        </p>
                        <form action="#" class="epix-cart-variation">
                            <div class="epix-quantity-validation">
                                <div class="wrap-2 d-block d-sm-inline-block mb-15 mb-sm-0">
                                    <div class="d-inline-block border-gray mr-20">
                                        <div class="epix-quantity-form">
                                            <div class="cart-plus-minus">
                                                <div class="qtybutton minus">-</div>
                                                <div class="qtybutton plus">+</div>
                                            </div>
                                            <input id="count" type="text" value="1">
                                        </div>
                                    </div>
                                    <a onclick="to_cart()" class="cart-btn mr-15">添加到购物车</a>
                                </div>
                                <a onclick="buy_now()"
                                   class="buy-btn d-block d-sm-inline-block text-center text-sm-left">立即购买</a>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<div class="footer-copyright-2" style="position: fixed;bottom: 0;width: 100%;">
    <div class="container">
        <div class="row">
            <div class="col-xxl-9 col-xl-6 col-lg-6">
                <p>Copyrights © 2021 EPIXX. All Rights Reserved.</p>
            </div>
        </div>
    </div>
</div>
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/bootstrap.bundle.min.js"></script>
<script src="../assets/js/isotope.pkgd.min.js"></script>
<script src="../assets/js/slick.min.js"></script>
<script src="../assets/js/swipper-bundle.min.js"></script>
<script src="../assets/js/jquery.meanmenu.min.js"></script>
<script src="../assets/js/wow.min.js"></script>
<script src="../assets/js/nice-select.js"></script>
<script src="../assets/js/jquery.elevatezoom.js"></script>
<script src="../assets/js/jquery.scrollUp.min.js"></script>
<script src="../assets/js/jquery-ui-slider-range.js"></script>
<script src="../assets/js/countdown.min.js"></script>
<script src="../assets/js/jquery.magnific-popup.min.js"></script>
<script src="../assets/js/imagesloaded.pkgd.min.js"></script>
<script src="../assets/js/mouse-wheel.min.js"></script>
<script src="../assets/js/main.js"></script>
</body>
</html>